<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CommentItem from './CommentItem.vue'
import { type FlatComment, flattenComments } from '../types/comment'
import type {CommentVO} from "@/types/vo/CommentVO";

const {comments} = defineProps<{
  comments: CommentVO[]
}>()

// 扁平化后的评论列表
const commentList = ref<FlatComment[]>([])

// 初始化数据
onMounted(() => {
  // 扁平化处理
  commentList.value = flattenComments(comments)
})

watch(() => comments, () => {
  commentList.value = flattenComments(comments)
})

const emit = defineEmits(['update:replies'])

// 更新评论的回复列表
const updateReplies = () => {
  emit('update:replies', commentList.value)
}


</script>

<template>
  <div class="comment-container">
    <!-- 评论列表 -->
    <div class="comment-list">
      <CommentItem
        v-for="comment in commentList"
        :key="comment.id"
        :comment="comment"
        @update:replies="updateReplies"
      />
    </div>
  </div>
</template>


<style scoped>
.comment-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  max-width: 100%;
  margin: 0 auto;
  background-color: #fff;
}

.comment-list {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
</style>
